<template>
  <div class="search_container">
    <div class="search_studnt">
      <div :class="['block',item.achievement!=-1?'block_bg':'']" v-for="item in studentList" :key="item.sid" @click="searchStudent(item)">
        <el-tooltip
          class="item"
          effect="dark"
          :content="`班级：${item.grade}-语言:${item.language}`"
          placement="bottom-end"
        >
          <span>
            <el-avatar :size="100" :class="[item.achievement!=-1?'img_bg':'']" :src="circleUrl"></el-avatar>
            <p>{{ item.sid }}</p>
            <p>姓名：{{ item.name }}</p>
          </span>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentList: [],
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  created() {
    this.getStudentList();
  },
  methods: {
    async getStudentList() {
      const res = await this.$http.get("/management/referenceUserList");
      console.log(res);
      this.studentList = res.data.data;
      // for(let i=0;i<100;i++){
      //   this.studentList.push(this.studentList[0])
      // }
    },

    searchStudent(item){
      // 跳转到批改界面
      this.$store.commit("addTab",{id:item.sid,name:"试卷-"+item.name,path:"/admin/search/"+item.sid})
      this.$router.push("/admin/search/"+item.sid)
    }
  },
};
</script>

<style lang="less" scoped>
.search_container{
  // height: 85vh;
}
.block {
  border: 1px solid #acacac;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 5px 10px;
  p:nth-child(2) {
    font-size: 10px;
  }
}
.block_bg{
  border: 1px solid rgb(135, 206, 235);
  color: skyblue;
}
.img_bg::after{
  content: "";
  display: inline-block;
  width: 100px;
  height: 100px;
  z-index: 10;
  position: relative;
  top: -100px;
  
  background-color:rgba(13, 157, 214, 0.4) ;
  // mix-blend-mode: screen;

}
.search_studnt {
  display: flex;
  flex-wrap: wrap
}
</style>